<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#target {
  --x: initial;
}
</style>
<div id="target"></div>
<script>
setup(() => {
  CSS.registerProperty({name: '--x', inherits: false});
});

test(() => {
  var animation = target.animate({'--x': 'test'}, 1);
  assert_equals(getComputedStyle(target).getPropertyValue('--x'), '');
  animation.cancel();
}, 'Do not crash when animating with an underlying value of initial');

test(() => {
  var animation = target.animate({'--x': 'initial'}, {fill: 'forwards'});
  assert_equals(getComputedStyle(target).getPropertyValue('--x'), '');
  animation.cancel();
}, 'Do not crash when animating an empty initial value');

test(() => {
  var animation = target.animate({'--x': 'inherit'}, {fill: 'forwards'});
  assert_equals(getComputedStyle(target).getPropertyValue('--x'), '');
  animation.cancel();
}, 'Do not crash when animating an inherited empty initial value');
</script>
